<template>
    <div class="report-add">
        <div class="report-label">报表：</div>
        <div class="report-input_box">
            <el-select filterable placeholder="请选择报表" clearable>
                <el-option v-for="item in reportOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="report-btn">
            <img src="@/assets/images/add-report.svg" class="add-report_icon">
            <div>添加报表</div>
        </div>
    </div>
</template>

<script setup lang="js">
import { ref } from "vue"

// 报表选项
const reportOptions = ref([
    { value: 1, label: "报表1" },
    { value: 2, label: "报表2" }
])

</script>
<style scoped lang="scss">
.report-add {
    display: flex;
    align-items: center;

    .report-label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(18);
        color: #FFFFFF;
    }

    .report-input_box {
        width: vw(660);
    }

    .report-btn {
        width: vw(127);
        height: vh(40);
        background: #1D566B;
        border-radius: vw(8);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: vw(11);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: vw(18);
        color: #FFFFFF;
        cursor: pointer;

        .add-report_icon {
            width: vw(27);
            margin-right: vw(4);
        }
    }
}
</style>